<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <link rel="stylesheet" href="../../build/aui-css/css/bootstrap.css">
    <script src="../../build/aui/aui.js"></script>
    <style>
    .vertical {
        float: left;
        margin: 10px;
    }
    </style>
</head>
<body>
    <h1>AlloyUI - Progress bar</h1>
    <h2>Horizontal</h2>
    <div id="nolabel"></div>
    <div id="basic" class="progress-bar-danger"></div>
    <div class="progress-striped">
        <div id="stripped" class="progress-bar-success"></div>
    </div>
    <h2>Vertical</h2>
    <div id="vertical" class="progress-bar-info"></div>
    <div id="vertical-bottom" class="progress-bar-warning"></div>
    <div class="clearfix"></div>
    <h2>Complete</h2>
    <div id="complete" class="progress-bar-success"></div>
    <script>
    YUI({ filter: 'raw' }).use('aui-progressbar', function(Y) {

        new Y.ProgressBar({
            contentBox: '#nolabel',
            value: 90,
            width: 500
        }).render();

        new Y.ProgressBar({
            contentBox: '#basic',
            label: '40%',
            max: 100,
            min: 0,
            on: {
                complete: function(e) {
                    this.set('label', 'Complete!');
                },
                valueChange: function(e) {
                    this.set('label', e.newVal + '%');
                }
            },
            value: 40,
            width: 500
        }).render();

        new Y.ProgressBar({
            contentBox: '#stripped',
            label: '90%',
            value: 90,
            width: 500
        }).render();

        new Y.ProgressBar({
            contentBox: '#vertical',
            orientation: 'vertical',
            label: '60%',
            value: 60,
            width: 30,
            height: 200
        }).render();

        new Y.ProgressBar({
            cssClass: 'bottom',
            contentBox: '#vertical-bottom',
            orientation: 'vertical',
            label: '60%',
            value: 60,
            width: 30,
            height: 200
        }).render();

        new Y.ProgressBar({
            contentBox: '#complete',
            label: 'complete!',
            value: 100,
            width: 500
        }).render();
    });
    </script>
</body>
</html>